
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="../favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <!-- Google Web Fonts -->


    <link rel="stylesheet" href="../dist/css/sm.min.css">
    <link rel="stylesheet" href="../dist/css/sm-extend.min.css">
    <link rel="stylesheet" href="../assets/css/demos.css">

    <link rel="apple-touch-icon-precomposed" href="../assets/img/apple-touch-icon-114x114.png">
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/config.js"></script>
    <script>
      //ga
    </script>
    
  </head>
  <body>
      <div class="page theme-dark">
          <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back">
              <span class="icon icon-left"></span>
              返回
            </a>
            <a class="button button-link button-nav pull-right">
              下一步
              <span class="icon icon-right"></span>
            </a>
            <h1 class="title">标题</h1>
          </header>
          <nav class="bar bar-tab">
            <a class="tab-item external active" href="#">
              <span class="icon icon-home"></span>
              <span class="tab-label">文案</span>
            </a>
            <a class="tab-item external" href="#">
              <span class="icon icon-me"></span>
              <span class="tab-label">文案</span>
            </a>
            <a class="tab-item external" href="#">
              <span class="icon icon-star"></span>
              <span class="tab-label">文案</span>
            </a>
            <a class="tab-item external" href="#">
              <span class="icon icon-cart"></span>
              <span class="tab-label">文案</span>
            </a>
            <a class="tab-item external" href="#">
              <span class="icon icon-settings"></span>
              <span class="tab-label">文案</span>
            </a>
          </nav>
          <div class="content" id='page-photo-browser'>
            <div class="list-block">
              <ul>
                <!-- Text inputs -->
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-name"></i></div>
                    <div class="item-inner">
                      <div class="item-title label">姓名</div>
                      <div class="item-input">
                        <input type="text" placeholder="Your name">
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-email"></i></div>
                    <div class="item-inner">
                      <div class="item-title label">邮箱</div>
                      <div class="item-input">
                        <input type="email" placeholder="E-mail">
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-password"></i></div>
                    <div class="item-inner">
                      <div class="item-title label">密码</div>
                      <div class="item-input">
                        <input type="password" placeholder="Password" class="">
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-gender"></i></div>
                    <div class="item-inner">
                      <div class="item-title label">性别</div>
                      <div class="item-input">
                        <select>
                          <option>Male</option>
                          <option>Female</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </li>
                <!-- Date -->
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                    <div class="item-inner">
                      <div class="item-title label">生日</div>
                      <div class="item-input">
                        <input type="date" placeholder="Birth day" value="2014-04-30">
                      </div>
                    </div>
                  </div>
                </li>
                <!-- Switch (Checkbox) -->
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                    <div class="item-inner">
                      <div class="item-title label">开关</div>
                      <div class="item-input">
                        <div class="label-switch">
                          <input type="checkbox">
                          <div class="checkbox"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="align-top">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-form-comment"></i></div>
                    <div class="item-inner">
                      <div class="item-title label">文本域</div>
                      <div class="item-input">
                        <textarea></textarea>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="content-block">
              <div class="row">
                <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
                <div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
              </div>
            </div>
            <div class="card demo-card-header-pic">
              <div valign="bottom" class="card-header color-white no-border no-padding">
                <!-- <img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt=""> -->
              </div>
              <div class="card-content">
                <div class="card-content-inner">
                  <p class="color-gray">发表于 2015/01/15</p>
                  <p>此处是内容...</p>
                </div>
              </div>
              <div class="card-footer">
                <a href="#" class="link">赞</a>
                <a href="#" class="link">更多</a>
              </div>
            </div>
          </div>
        </div>
        <script src="../dist/js/sm.js"></script>
        <script src="../dist/js/sm-extend.js"></script>
        <script src="../dist/js/sm-city-picker.js"></script>
        <script src="../assets/js/demos.js"></script>
  </body>
</html>
